<template>
  <div>
    <h1>Todo Show</h1>
    <hr>

    <template v-if="ableInput">
      <h3>{{todo.content}}</h3>
      <p>{{todo.description}}</p>
    </template>
    <template v-else>
      <input type="text" v-model="todo1.content">
      <br>
      <textarea v-model="todo1.description"></textarea>
    </template>
    <hr>
    <button @click="updateTodo">
      {{ ableInput ? '修改' : '保存' }}
    </button>
    <button @click="delTodo">删除</button>

  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "TodolistShow",
  data() {
    return {
      todo: {},
      todo1: {},
      ableInput: true
    }
  },
  created() {
    const id = this.$route.params.id
    axios({
      url: `https://api.yizhanketang.cn/api/v1/todos/${id}`
    }).then(res => {
      const { data } = res.data
      console.log(data)
      this.todo = data
      this.todo1 = {...data}
    })
  },
  methods: {
    updateTodo() {
      if (this.ableInput) {
        this.ableInput = false
      } else {

        const id = this.$route.params.id
        axios({
          method: 'POST',
          url: `https://api.yizhanketang.cn/api/v1/todos/${id}`,
          data: {
            content: this.todo1.content,
            description: this.todo1.description,
          }
        }).then(res => {
          const { data } = res.data
          console.log('修改后')
          console.log(data)
          this.todo = data
          this.todo1 = {...data}

          this.ableInput = true
        })

        console.log(this.todo1)
      }
    },
    delTodo() {
      if (confirm('删除吗？')) {
        const id = this.$route.params.id
        axios({
          method: 'POST',
          url: `https://api.yizhanketang.cn/api/v1/todos/${id}/delete`
        }).then(() => {
          this.$router.replace({
            name: 'TodoList'
          })
        })
      }
    }
  }
}
</script>

<style scoped>

</style>